<template>
  <div>
    <div class="searchBox">
      <search-view></search-view>
      <div class="mainBox">
        <div class="leftBox">
          <van-sidebar v-model="activeKey">
            <van-sidebar-item
              v-for="item in list"
              :key="item.id"
              :title="item.name"
              @click="qiehuan"
            />
          </van-sidebar>
        </div>
        <div class="rightBox">
          <main-view :lk001="lk001"></main-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchView from "../homeview/components/SearchView.vue";
import MainView from "./components/MainView.vue";
export default {
  components: { SearchView, MainView },
  name: "ClassIfy",
  data() {
    return {
      activeKey: 0,
      list: [],
      lk001: [],
    };
  },
  async created() {
    let res = await this.$http.getGouwu();
    this.list = res.data.data.cate;

    let res2 = await this.$http.getGreens("lk001.json");
    this.lk001 = res2.data.data.cate;
  },
  methods: {
    
    qiehuan(index) {
      let str = "lk00"
      console.log(index);
      if(index>=9){
        str = "lk0"
      }
      this.$http.getGreens(str+(index+1)+".json").then(res3 => {
        this.lk001 = res3.data.data.cate;
      });
       
    },
  },
};
</script>

<style scoped lang="scss">
.van-sidebar{
  height: 90vh;
}
.searchBox {
  width: 95%;
  margin: 0.2rem auto;
}
.mainBox {
  display: flex;
}
.rightBox {
  width: 80%;
}
</style>